<template>
  <div id="goodsComments">
    <el-row>
      <el-col :span="7">
        <el-card>
          <apexchart width="350" type="donut"
                     :options="chart.chartOptions" :series="chart.series">
          </apexchart>
        </el-card>
      </el-col>
      <el-col :span="3" v-for="(item,index) in tags" :key="index">
        <el-tag type="info">{{ item.name }}({{ item.count }})</el-tag>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect()">
          <el-menu-item index="1">全部评价</el-menu-item>
          <el-menu-item index="2">晒图</el-menu-item>
          <el-menu-item index="3">视频晒单</el-menu-item>
          <el-menu-item index="4">追评</el-menu-item>
          <el-menu-item index="5">好评</el-menu-item>
          <el-menu-item index="6">中评</el-menu-item>
          <el-menu-item index="7">差评</el-menu-item>
          <el-menu-item index="8">
            <el-checkbox v-model="checked" size="mini">只看当前商品评价</el-checkbox>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="4">
        <el-select v-model="sort">
          <el-option
              v-for="(item,index) in sorts"
              :key="index"
              :label="item"
              :value="item">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row v-for="(comment,commentIndex) in commentList" :key="commentIndex">
      <el-col :span="4" style="text-align: center">
        <el-avatar :size="70" :src="comment.userInfo.avatarUrl"></el-avatar>
        <el-col><span style="color: #606266;font-size: 0.4em">{{ comment.userInfo.username }}</span></el-col>
      </el-col>
      <el-col :span="20">
        <el-row>
          <el-col :span="4">
            <el-rate v-model="comment.rate" :disabled="true"></el-rate>
          </el-col>
          <el-col :sapn="14">
            <div class="none"></div>
          </el-col>
          <el-col :span="6">
            <span style="color: #909399">评论于{{ comment.date }}</span>
          </el-col>
        </el-row>
        <p style="margin-right: 40px">{{ comment.content.text }}</p>
        <div v-if="comment.hasImg">
          <el-col :span="24">
            <div v-for="(img,imgIndex) in comment.content.imgUrlList" :key="imgIndex"
                 @click="checkImg(commentIndex,imgIndex)">
              <el-tag style="height: 51px;float: left"
                      type="info"
                      effect="plain"
                      size="medium">
                <el-image :src="img.url" style="width: 45px;height: 45px"></el-image>
              </el-tag>
            </div>
          </el-col>
          <el-image :src="comment.content.checkedImgUrl" style="width: 280px"
                    :preview-src-list="previewSrcList"></el-image>
        </div>
        <div>
          <el-tag style="border: 0" effect="plain" type="danger" size="medium"><i class="el-icon-star-off"></i>
            {{ comment.likes }}
          </el-tag>
          <el-tag style="border: 0" effect="plain" type="success" size="medium"><i class="el-icon-chat-dot-round"></i>
            {{ comment.comments }}
          </el-tag>
        </div>
        <el-divider></el-divider>
      </el-col>
    </el-row>
  </div>
</template>
<script>


export default {
  name: "goodsComments",
  components: {},
  props: ['id'],
  data() {
    return {
      activeIndex: '1',
      previewSrcList: [],
      sort: {},
      sorts: [],
      chart: {},
      tags: [],
      commentList: [],
    }
  },
  created() {
    this.axios.get(
        '/api/comments'
    ).then((res)=>{
      let commentList=res.data.commentList
      commentList.forEach((item) => {
        let hasImg = false
        if (item.content.imgUrlList) {
          hasImg = true
          let imgUrlList = []
          for (let i = 0; i < item.content.imgUrlList.length; i++) {
            let img = {url: item.content.imgUrlList[i], checked: false}
            i == 0 ? img.checked = true : img.checked = false
            imgUrlList.push(img)
          }
          item.content.imgUrlList = imgUrlList
          item.content = Object.assign(item.content, {checkedImgUrl: imgUrlList[0].url})
        }
        item = Object.assign(item, {hasImg: hasImg})
      })
      this.commentList=commentList
    }).catch((err)=>{
      this.$message.error(err)
    })
  },
  mounted() {
    this.axios.get(
        '/api/comments'
    ).then((res)=>{
      let sorts=res.data.sorts
      let chart=res.data.chart
      let tags=res.data.tags
      this.sorts=sorts
      this.chart=chart
      this.tags=tags
    }).catch((err)=>{
      this.$message.error(err)
    })
  },
  methods: {
    checkImg(commentIndex, imgIndex) {
      this.commentList[commentIndex].content.imgUrlList.forEach((item) => {
        item.checked = false
      })
      this.commentList[commentIndex].content.imgUrlList.forEach((item, index) => {
        if (imgIndex == index) {
          item.checked = true
          this.commentList[commentIndex].content.checkedImgUrl = item.url
        }
      })
      let previewSrcList = []
      this.commentList[commentIndex].content.imgUrlList.forEach((item) => {
        previewSrcList.push(item.url)
      })
      this.previewSrcList = previewSrcList
    },
    handleSelect(){

    }
  }
}
</script>

<style scoped>

</style>
